<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/videoUpload.css">
  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>视频上传</title>
<body>
<!-- 导航 -->
<div id="videoUploadPage">
  <nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
    <h1 class="title">
      <a class="navbar-brand" href="#">
        <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
      </a>
    </h1>
    <!-- 折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto" id="ulInfo">
        <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
        <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->
        <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                               href="videoManager.html">视频管理</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a></li>
        <!--下拉-->
        <li class="dropdown" style="margin-right: 450px">
          <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
          <ul class="dropdown-menu" style="text-align: center;">
            <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
            <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
            <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
            <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
          </ul>
        </li>

        <template v-if="currentUser.account == null">
          <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
        </template>
        <template v-if="currentUser.account != null">
          <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
        </template>
      </ul>
      <form action="" class="form-inline ml-auto" id="formSearch">
        <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
               @change="searchVideo">
        <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
      </form>
    </div>
  </nav>

  <!-- 风格展示区 -->
  <div class="trend-style bg-light" id="itemInfo">
    <!--主体开始-->
    <div class="box">
      <div class="box_con">
        <div class="res_upload conten clearfix">
          <div class="res_upload_left fl">
            <form action="../uploadVideo" method="post" enctype="multipart/form-data">
              <div class="res_upload_title">上传视频</div>
              <ul>
                <li class="clearfix2">
                  <div class="form_name fl">视频名称：</div>
                  <div class="form_input fl">
                    <input type="text" name="videoName" placeholder="请输入视频名称">
                  </div>
                </li>
                <li class="clearfix2">
                  <div class="form_name fl">视频封面：</div>
                  <div>
                    <input id="uploadCover" name="coverUrl"
                           style="margin-left: 50px;margin-top: 5px;width: 200px" type="file">
                    <img src="" id="coverImg" style="margin-left:400px;margin-top: -45px" alt="缩略图"
                         width="100px" height="60px">
                  </div>
                </li>
                <li class="clearfix2">
                  <div class="form_name fl">视频文件：</div>
                  <div>
                    <input name="videoUrl" style="margin-left: 50px;margin-top: 5px" type="file">
                  </div>
                </li>

                <li class="clearfix2">
                  <div class="form_name fl">视频类型：</div>
                  <input type="text" style="display: none" name="type" id="type" v-model="type">
                  <el-select v-model="type" placeholder="请选择">
                    <el-option v-for="item in videoTypeList" :key="item.typeId"
                               :label="item.typeName"
                               :value="item.typeId">
                    </el-option>
                  </el-select>
                </li>
                <li class="clearfix2">
                  <div class="form_name fl">视频状态：</div>
                  <input type="text" style="display: none" name="status" id="status" v-model="status">
                  <el-select v-model="status" placeholder="请选择">
                    <el-option label="免费" :value="1"></el-option>
                    <el-option label="VIP尊享" :value="2"></el-option>
                  </el-select>
                </li>
                <li class="clearfix2">
                  <div class="form_name fl">关键字：</div>
                  <div class="form_input fl"><input id="keyword" name="keyword" type="text"
                                                    placeholder="请输入视频关键字"></div>
                </li>
                <li class="clearfix2">
                  <div class="form_name fl">视频简介：</div>
                  <div class="form_input fl"><input id="videoDetail" name="videoDetail"
                                                    style="height: 100px" type="text"
                                                    placeholder="请输入视频简介"></div>
                </li>
                <li class="clearfix2">
                  <div class="form_name fl"></div>
                  <div class="form_input fl">
                    <button type="submit">提交</button>
                  </div>
                </li>
              </ul>
            </form>
          </div>
          <div class="res_upload_right fl">
            <div class="res_upload_right_title">温馨提示</div>
            <p>1.上传涉及侵权内容的文档将会被移除</p>
            <p>2.请勿上传与学习无相关的视频</p>
            <p>3.支持私有文档的上传，仅您自己可以查看到</p>
            <p>4.上传过程中请勿刷新或者关闭本页</p>
            <p>5.为了保证文档能正常显示，我们支持以下格式的文档上传</p>
            <div class="upload_info">
              <p>图片：png，jpg，jpeg</p>
              <p>视频：mp4，avi(文件大小不超过30M)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- footer部分 -->
  <footer class="bg-white navbar-light p-4  text-center">
    <div class="container">
      <h3>合作伙伴</h3>
      <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
      <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by liuxin.</p>
    </div>
  </footer>
</div>
</body>
<!--底部结束-->
<script src="../js/resources.js"></script>
<script type="text/javascript">
  /*传递搜索参数*/
  new Vue({
    el: "#videoUploadPage",
    data: {
      keyword: "",
      status: "",
      type: "",
      currentUser: "",
      videoTypeList: [],
    },
    methods: {
      searchVideo: function () {
        window.location.href = "search.html?keyword=" + this.keyword;
      },
    },
    mounted() {
      const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

      axios.post('../getCurrentUser').then(result => {
        loading.close();
        this.currentUser = result.data;
      }).catch(function (error) {
        loading.close();
        this.$message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
      });
      // 获取视频类型列表
      const getVideoTypeListLoading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
      axios.post('../getVideoTypeList').then(result => {
        getVideoTypeListLoading.close();
        this.videoTypeList = result.data;
      }).catch(function (error) {
        getVideoTypeListLoading.close();
        this.$message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
      });
    }
  });
  //为图片选择框绑定change事件
  let uploadCover = $("#uploadCover");
  uploadCover.click();
  uploadCover.change(function () {
    let reader = new FileReader();
    reader.onloadend = function (e) {
      //修改图片的src属性，显示新的图片
      document.getElementById('coverImg').src = e.target.result;
    }
    reader.readAsDataURL(this.files[0]);  // 读取文件内容
  });

</script>
</html>
